<template>
  <div>
    <button @click="show = !show">点击我切换显示与隐藏</button>
    <!-- 标签参加过过渡动画 -->
    <!-- 哪一个标签|哪一个组件向拥有过渡动画，在它的外层加上一个transition内置组件 -->
    <transition name="jch">
      <!--参与过渡动画的元素|组件，外层需要套上内置组件transiton-->
      <!-- <div class="box" v-show="show"></div> -->
    </transition>

    <transition name="yp">
      <Child v-show="show" />
    </transition>
  </div>
</template>

<script>
import Child from "./components/Child";
export default {
  name: "",
  data() {
    return {
      show: true,
    };
  },
  components: {
    Child,
  },
};
</script>

<style scoped>
.box {
  width: 400px;
  height: 200px;
  background: skyblue;
  opacity: 1;
}
/* 书写样式 */
/* 离开：开始阶段 */
.jch-leave {
  opacity: 1;
  width: 400px;
  height: 200px;
}
/* 一般定义过渡动画的时间、速率、延迟时间 */
.jch-leave-active {
  transition: all 3s linear 0s;
}
/* 离开：结束阶段 */
.jch-leave-to {
  opacity: 0;
  width: 0px;
  height: 0px;
}

/* 进入过渡动画 */
.jch-enter {
  width: 0px;
  height: 0px;
  opacity: 0;
}
.jch-enter-active {
  transition: all 3s linear 0s;
}
.jch-enter-to {
  width: 400px;
  height: 200px;
  opacity: 1;
}
</style>

<style scoped>
.yp-leave {
  transform: rotate(0deg);
}
.yp-leave-active {
  transition: all 3s;
}
.yp-leave-to {
  transform: rotate(360deg);
}

.yp-enter {
  transform: rotate(0deg);
}
.yp-enter-active{
    transition: all 3s;
}
.yp-enter-to {
  transform: rotate(360deg);
}
</style>
